<template>
  <view class="warp">
    <u-navbar back-text="返回" back-icon-size="30" :is-back="true">
      <view class="header">
        <u-search @search="search" :placeholder="type == 'goods' ? '搜索商品' : '输入关键字搜索文章'" :show-action="false" margin="0 20rpx" :focus="true" />
      </view>
    </u-navbar>
	
	<view class="search_box">
		<view class="search_title">
			<image src="/static/images/hot.png"></image>
			<view class="hot">热门搜索</view>
		</view>
		<view class="search_content">
			<view class="item"  v-for="item in hotList">{{item.words}}</view>
		</view>
	</view>
	
    <view class="empty-box" v-if="list.length === 0 && status === 'nomore'">
		<u-empty mode="search" :text="`没有搜到 ${keyword} 相关信息`" />
	</view>
    <view class="content" v-else>
      <!-- <view class="list" v-if="type == 'article'"><articleItem v-for="item in list" :key="item.id" :item="item" /></view> -->
      <view class="list">
		  <goodsItem v-for="item in list" :key="item.id" :item="item" />
	  </view>
      <u-loadmore v-if="keyword" :status="status" bg-color="#f8f8f8" margin-top="50" margin-bottom="50" @loadmore="loadMore" />
      <u-back-top :scroll-top="scrollTop" />
    </view>
	
  </view>
</template>

<script>
import articleItem from '../../components/articleItem.vue';
import goodsItem from '../../components/goodsItem.vue';
export default {
  components: {
    articleItem,
    goodsItem
  },
  data() {
    return {
      page: 1,
      list: [],
      keyword: '',
      status: 'loading',
      scrollTop: 0,
      type: 'article',
	  hotList:[]
    };
  },
  onLoad(options) {
    this.keyword = options.keyword;
    if (options.type) {
      this.type = options.type;
    }
    if (this.keyword) {
      this.getList();
    }
	this.getHot()
  },
  onReachBottom() {
    this.loadMore();
  },
  onPageScroll(e) {
    this.scrollTop = e.scrollTop;
  },
  methods: {
    search(e) {
      this.keyword = e;
      this.list = [];
      this.getList();
    },
	getHot(){
		this.$api.get({
			url: 'portal/shop/search_page',
			success: res => {
				if (res.code == 1) {
					this.hotList = res.data.hot;
					this.list = res.data.list;
				} else {
					this.$toast('数据获取失败');
				}
			}
		});
	},
    getList() {
      this.status = 'loading';
      let url = 'portal/shop/search_all';
      let field = 'id,post_title,thumbnail,published_time,comment_count,post_hits';
      // if (this.type == 'goods') {
      //   url = 'mall/list/index';
      //   field = 'id,title,thumbnail,price,subtitle';
      // }
      this.$api.get({
        url: url,
        data: {
          keywords: this.keyword,
          page: `${this.page},10`, // 一页显示10条
          order: '-id',
          field: field
        },
        success: res => {
          if (res.code == 1) {
            let list = res.data;
            this.list = this.list.concat(list);
            // 分页判断
            if (list.length < 10) {
              this.status = 'nomore';
            } else {
              this.status = 'loadmore';
              this.page++;
            }
          }
        }
      });
    },
    loadMore() {
      if (this.status === 'loadmore') {
        this.getList();
      }
    }
  }
};
</script>

<style lang="scss" scoped>
	.search_box{
		// height:50rpx;
		// line-height: 50rpx;
		padding:10rpx;
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		// align-items: center;
		justify-content: center;
		.search_title{
			line-height: 50rpx;
			display:flex;
			.hot{
				margin-left:10rpx;
			}
		}
		.search_content{
			display:flex;
			.item{
				margin: 6px 6px 6px 0;
				padding: 4px;
				border:1px solid #999;
				color: #333;
				display: inline-block;
				-webkit-border-radius: 4px;
				-moz-border-radius: 4px;
				border-radius: 4px;
				font-size: 14px;
			}
		}
		image{
			width:50rpx;
			height:50rpx;
		}
	}
.list{
		width: 100%;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		justify-content:center;
	}
.empty-box {
  height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.header {
  display: flex;
  align-items: center;
  /*  #ifndef MP  */
  flex: 1;
  /*  #endif  */
}
</style>
